<template>
  <div>
    <div class="profile">
      <Avatar
        icon="ios-person"
        size="large"
        :src="fullUrl(user.avatar)"
      />
      <span style="margin-left:0.5em">{{ user.username }}</span>
    </div>
    <Tabs :animated="false">
      <!-- 投稿 -->
      <!-- <PostsTab :user-id="user.id" /> -->
      <!-- 歌单 -->
      <PlayListTab :user-id="user.id" />
      <!-- 收藏 -->
      <FavsTab :user-id="user.id" />
      <!-- 设置 -->
    </Tabs>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { CreateQueryParams } from '@nestjsx/crud-request'
import { User, getUser } from '@/api/users'
import { cdn } from '@/utils'
import PostsTab from './tabs/PostsTab.vue'
import PlayListTab from './tabs/PlayListTab.vue'
import FavsTab from './tabs/FavsTab.vue'

@Component({
  name: 'User',
  components: {
    PostsTab,
    PlayListTab,
    FavsTab
  }
})
export default class extends Vue {
  private params: CreateQueryParams = {};

  private fullUrl = cdn;

  private user: Partial<User> = {};

  async created () {
    this.user = (await getUser(this.$route.params.userId, this.params)).data
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/theme";

.profile {
  .avatar {
    width: 48px;
    height: 48px;
  }
  .name {
    font-size: 1.2em;
  }
}
</style>
